<template>
	<view class="main-container">
		<view class="gift-card-box">
			<view class="card-item-box">
				<view class="label">卡号</view>
				<view>{{cardNum}}</view>
			</view>
			<view class="card-item-box">
				<view class="label">余额</view>
				<view class="money">￥{{leftValue}}</view>
			</view>
			<view class="card-item-box">
				<view class="label">购卡时间</view>
				<view>{{created}}</view>
			</view>
			<view class="card-item-box">
				<view class="label">有效期至</view>
				<view>{{expiredTime}}</view>
			</view>
			<view class="card-item-wrapper">
				<view class="card-item-box" style="border: none;">
					<view class="label">提货码</view>
					<view style="font-size: 28rpx;color: #C8C9CC;">输入提货码即可完成支付</view>
				</view>
				<view class="card-code-box">
					<span>{{cardCode}}</span>
					<span style="font-weight: 600;font-size: 28rpx;color: #3EB3F3;"
					  @click="copyText">复制</span>
				</view>
			</view>
		</view>
		<view class="comments">
			<view style="font-weight: 600;">
				温馨提示:
			</view>
			<view>
				1.赠送后无法收回，请谨慎操作!
			</view>
			<view>
				2.赠送属于个人行为，与本司无关。
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardNum: '6123 4567 8908 256',
				leftValue: 0,
				created: '',
				expiredTime: '',
				cardCode: '11111111',
			}
		},
		mounted() {
			this.created = '2025-09-24 23:10:48'
			this.expiredTime = '2027-09-24 23:10:48'
		},
		methods: {
			copyText () {
				console.log("复制提货码");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main-container {
		position: relative;
		background: #F5F5F9;
		height: 100vh;
		padding: 24upx;
		.gift-card-box{
			background-color: white;
			padding: 24upx;
		}
		.card-item-box {
			height: 96upx;
			line-height: 96upx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1upx solid #E8E8E8;
			.lable {
				font-size: 28rpx;
				color: #23242E;
				line-height: 42rpx;
			}
			.money {
				color: red;
			}
		}
		.card-item-wrapper{
			.card-code-box {
				width: 650rpx;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 24upx;
				background: #F5F5F9;
				border-radius: 8rpx;
				color: #23242E;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.comments {
		margin-top: 24upx;
		font-weight: 500;
		font-size: 24rpx;
		color: #7F808A;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
	}
</style>